<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: #f5dc3a;
            border-radius: 8px;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <script>
        var xx;
        var div = document.querySelector('.div1');
        // 1. 按下鼠标 开始准备移动
        div.onmousedown = function(e) {
            // 获取鼠标到div边界的距离
            var x = e.offsetX;
            // xx = e.offsetX;
            var y = e.offsetY;
            // 在移动过程中x和y的值不再变化，这才是相对静止
            // console.log(x,y);

            // 鼠标移动，在body中移动,不是div 想想什么叫拖拽
            document.body.onmousemove = function (e) {
                // 这时候就要修改div的坐标了
                div.style.left = e.clientX - x + 'px';
                // 这里要剪掉x和y的原因是 div的坐标原点是左上角，需要减去点击位置距离左上角的横行坐标和纵向坐标
                div.style.top = e.clientY - y + 'px';
            }
        }
        // 释放鼠标 位置不在修改
        div.onmouseup = function() {
            document.body.onmousemove = null;
        }
        console.log(xx);
    </script>
</body>
</html>